<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
      <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
      <title>选择出行人</title>
      <link rel="stylesheet" href="../../../css/aui.css" />
      <link rel="stylesheet" href="../../../css/my/sort.css" />
      <link rel="stylesheet" href="../../../css/iconfont/iconfont.css" />
      <link rel="stylesheet" href="../../../css/index/train/train_people.css" />
  </head>

  <body>
      <div class="aaa" id="title" style="position:fixed;top:-0.1rem;width:100%;z-index:999;">
          <!--头部start-->
          <header class="aui-bar aui-bar-nav" style="background: #3CB0D6;padding-top:1rem;" id='header'>
              <a class="aui-pull-left aui-btn" onclick="closeWin();">
                  <span class="aui-iconfont aui-icon-left"></span>
              </a>
              <div class="aui-title">选择出行人</div>
              <div class="title-right" onclick="accomplish()">完成</div>
          </header>
          <!--头部end-->
          <div class="aui-tab" id="tab">
              <div class="aui-tab-item aui-active">公司员工</div>
              <div class="aui-tab-item" id="passenger">常用出行人</div>
          </div>
          <div class="aui-searchbar" id="search">
              <!--<div class="aui-searchbar-input aui-border-radius" tapmode onclick="doSearch()">-->
              <div class="aui-searchbar-input aui-border-radius" tapmode>
                  <i class="aui-iconfont aui-icon-search"></i>
                  <form action="javascript:search();">
                      <input type="search" onchange="change(this)" placeholder="搜索出行人" id="search-input">
                  </form>
              </div>
          </div>
      </div>

      <div class="sort_box" style="">
          <div class="sort_list">
              <div class="num_logo">李</div>
              <div class="num_name user_info gray-4">李四</div>
              <div class="user_info gray-8">身份证 14052218546541351</div>
          </div>
      </div>
      <div style="display: none;position:fixed;bottom:50px;right:20px;backyard-color:#3cb0d6" id="add_bnt">
          <span class="icon iconfont icon-jiahao1" style="color:#3CB0D6;font-size: 2rem;" onclick="add()"></span>
      </div>
      <div id="letter"></div>
      <div class="initials" style="margin-top:-1.5rem;">
          <ul>
              <!--<li><img src="../../../image/068.png"></li>-->
          </ul>
      </div>
  </body>
</html>
<script type="text/javascript" src="../../../script/aui/api.js"></script>
<script type="text/javascript" src="../../../script/extend/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../../../script/aui/aui-toast.js"></script>
<script type="text/javascript" src="../../../script/aui/aui-tab.js"></script>
<script type="text/javascript" src="../../../script/extend/jquery.charfirst.pinyin.js"></script>
<script type="text/javascript" src="../../../script/extend/sort.js"></script>
<script type="text/javascript" src="../../../script/config.js"></script>
<script type="text/javascript" src="../../../script/common.js"></script>

<script type="text/javascript">
    var order_self,
        productId,
        company_staff = [],//公司员工
        common_staff = [];//常用出行人
    apiready = function() {
        api.parseTapmode();
        var header = $api.byId('header');
        $api.fixStatusBar(header);

        //设置出行人列表距离顶部高度
        var frameheight = $api.cssVal($api.byId('title'),'height');
        $api.css($api.dom('.sort_box'),'margin-top:'+frameheight+';');
        //接收监听证件类型和证件号码
        api.addEventListener({
            name: 'travelList'
        }, function(ret, err) {
            if (ret.value.submit == 1) {
              getUserList(1,'');
            }
        });
        // if (deviceType() == 'ios') {
        //   $api.css($api.dom('#header'),'padding-top:2rem;');
        // }
        productId = $api.getStorage('card_submit_type');
        if (productId == 0) {
            //火车
            order_self = $api.getStorage('order_self');
            $('#passenger').css('display', 'none');
        } else if (productId == 1) {
            //机票
             order_self = $api.getStorage('order_self');
        } else if (productId == 2) {
            //酒店
            order_self = $api.strToJson($api.getStorage('trip_policy')).order_type;
        }
        if (order_self != 1) {
            $('#passenger').css('display', 'none');
        }
        getUserList(0, '');
        //点击选中用户,再次点击取消选中
        $('.sort_box').on('click', '.sort_list', function() {
            var tab_index = $('.aui-active').attr('data-item-order');
            var id = $(this).attr('id');
            //判断当前元素是否已经被选中
            if (!$(this).hasClass("active")) {
                if (company_staff.length + common_staff.length >= 5) {
                    $toast('只能选择5位用户');
                } else {
                    $(this).addClass("active").find('.num_logo').html('&radic;');
                    if (tab_index == 0) {
                        company_staff.push(id);
                    } else {
                        common_staff.push(id);
                    }
                }
            } else {
                var sort_name = $(this).find('.num_name').text().substring(0, 1);
                $(this).removeClass("active").find('.num_logo').html(sort_name);
                if (tab_index == 0) {
                    company_staff.splice($.inArray(id, company_staff), 1);
                } else {
                    common_staff.splice($.inArray(id, common_staff), 1);
                }
            }
        })
    }

    var tab = new auiTab({
        element: document.getElementById("tab"),
        index: 1,
        repeatClick: false
    }, function(ret) {
        //        $(".alls").eq(ret.index-1).show().siblings(".alls").hide();
        getUserList(ret.index-1, '');
        if (ret.index - 1 == 1) {
            $('#add_bnt').show();
        } else {
            $('#add_bnt').hide();
        }
    });
    //获取常用联系人或出行人列表
    function getUserList(index, search) {
        $('.sort_box').empty();
        $('.initials ul').empty();
        var url = '';
        //判断不同的tab_index获取不同的列表
        if (index == 0) {
            url = Config.common.getCompanyUserList;
        } else {
            url = Config.common.getTravelers
        }
        //获取个人的差旅政策
        var param = {};
        param.url = url;
        param.data = {
            search: search
        };
        var html = '';
        ajax(param, function(data) {
            if (data.code == 1) {
                var res = data.data;
                $(res).each(function(key, val) {
                    var policy_name = '无差旅政策限制';
                    is_show = '#000';
                    if (index == 1) {
                        name = val.name;
                        sort_name = name.substring(0, 1);
                        id = val.travels_id;
                        if (order_self != 1) { //因公出行
                            trip_policy = $api.strToJson($api.getStorage("trip_policy"));
                            policy_name = trip_policy.policy_name + '差旅政策';
                        } else {
                            is_show = '#f5f5f5';
                        }
                    } else {
                        name = val.user_name;
                        sort_name = name.substring(0, 1);
                        id = val.user_id;
                        policy_name = val.policy_name + '差旅政策';
                    }
                    html += '<div class="sort_list" id="' + id + '"><div class="num_logo" >' + sort_name + '</div><div class="num_name user_info gray-4" >' + name + '</div><div style="color:' + is_show +
                        '" class="user_info gray-8">' + policy_name + '</div></div>';
                })
            }
            $('.sort_box').append(html);
            sort();
            if (index == 1) {
                $(common_staff).each(function(key, val) {
                    $('#' + val).addClass('active');
                    $('#' + val).find('.num_logo').html('&radic;');
                })
            } else {
                $(company_staff).each(function(key, val) {
                    $('#' + val).addClass('active');
                    $('#' + val).find('.num_logo').html('&radic;');
                })
            }
        })
    }

    function add() {
        openWin('add_win', '../../my/frequenter/add_win.html');
    }

    function change(obj) {
        var tab_index = $('.aui-active').attr('data-item-order');
        getUserList(tab_index, obj.value);
    }

    //选择完出行人
    function accomplish() {
      // console.log(JSON.stringify(company_staff));
      // console.log(JSON.stringify(common_staff));
      var plane_msg = api.pageParam.plane_msg;
        //判断是否有选择出行人
        if (company_staff.length + common_staff.length > 0) {
            $api.setStorage("travel_people", company_staff.join(','));
            $api.setStorage("common_staff", common_staff.join(','));
            //如果是因私为他人跳转到提交订单页面否则跳转到选择差旅政策页面
            if (productId == 1) {
                //机票
                if (order_self == 1) {
                    api.openWin({
                        name: 'plane_order_win',
                        url: '../aircraft/plane_order_win.html',
                        pageParam: {
                          selected_staff : company_staff,
                          selected_train : common_staff,
                          plane_msg : plane_msg,
                          planeInfo : api.pageParam.planeInfo
                        },
                        slidBackEnabled:false
                    });
                } else {
                    //差旅政策页面
                    api.openWin({
                        name: 'travel_policy_win',
                        url: './travel_policy_win.html',
                        pageParam: {
                            selected_staff : company_staff,
                            plane_msg : plane_msg,
                            planeInfo : api.pageParam.planeInfo
                        },
                        slidBackEnabled:false
                    });
                }
            } else if (productId == 0) {
                //add by hongwei  2018-08-02 start /出行人的ID
                $api.setStorage('travel_people_id_array', company_staff.join(','));
                //add by hongwei  2018-08-02 end /出行人的ID
                //火车票
                if (order_self == 1) { //因私
                    //提交页面
                    api.openWin({
                        name: 'submit_order_win',
                        url: '../train/submit_order_win.html',
                        pageParam: {
                            selected_staff : company_staff
                        }
                    });
                } else {
                    //差旅政策页面
                    api.openWin({
                        name: 'travel_policy_win',
                        url: './travel_policy_win.html',
                        pageParam: {
                            selected_staff : company_staff,
                            train_type : api.pageParam.train_type,
                            seat_name : api.pageParam.seat_name
                        }
                    });
                }
            } else if(productId == 2){
                //酒店
                if (order_self == 1) {
                    api.openWin({
                        name: 'submit_order_frm',
                        url: './../hotel/submit_order_frm.html',
                        slidBackEnabled:false
                    });
                } else {
                    //差旅政策页面
                    api.openWin({
                        name: 'travel_policy_win',
                        url: './travel_policy_win.html',
                        slidBackEnabled:false
                    });
                }
            }

        } else {
            $toast('请先选择出行人');
        }
    }
</script>
